<template id='NewsDetail'>
  <div class="NewsDetail">
    <top-bar :isClick="isClick" />

    <div class="main">
      <div
        class="cover"
        :style="{ backgroundImage: `url(${info.cover_img})` }"
        v-if="info.cover_img"
      ></div>
      <div class="content">
        <div class="toastLine">
          <div class="toastBar">
            <span class="text">
              <span @click="goToHome">Home</span> >
              <span @click="goToNews">News</span></span
            >
            >
            <span class="title">{{ info.title }}</span>
          </div>
          <!-- <div class="share">
            <b-img :src="shareIcon" fluid @click="share()"></b-img
            ><span>share</span>
          </div> -->
        </div>
        <div class="line"></div>
        <div
          v-if="info.cover_img"
          class="mainBg"
          :style="{ backgroundImage: `url(${info.cover_img})` }"
        ></div>
        <div class="headline">{{ info.title }}</div>
        <div class="time">{{ info.ctime }}</div>
        <div class="detail" v-html="info.content"></div>
      </div>
    </div>

    <bottom-bar />
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar.vue";
import TopBar from "../../components/TopBar.vue";
import { iscode } from "../../tools/index";
import { getNewsDetailApi } from "../../assets/api/index";
export default {
  name: "NewsDetail",
  components: {
    BottomBar,
    TopBar,
  },
  data() {
    return {
      id: "",
      type: "",
      isClick: 4,
      shareIcon: require("../../assets/images/news/share.png"),
      info: {},
    };
  },

  computed: {},

  watch: {},

  methods: {
    async getNewsDetail() {
      let result = await getNewsDetailApi({
        id: this.id,
      });
      if (iscode(result)) {
        this.info = result.data.info;
      }
    },

    goToHome() {
      this.$router.push("/");
    },

    goToNews() {
      this.$router.push("/news");
    },

    share() {},
  },

  created() {
    this.id = this.$route.query.id;
  },

  mounted() {
    this.getNewsDetail();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang='less' scoped>
.NewsDetail {
  user-select: none;
  padding-top: 128px;
  background-color: #000;
  .main {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 50px;
    // height: 1742px;
    position: relative;
    .cover {
      background: #000 !important;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: 100% 100%;
      opacity: 0.29;
    }
    .content {
      width: 100%;
      height: 100%;
      padding: 0 244px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      .toastLine {
        width: 100%;
        margin-top: 53px;
        margin-bottom: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .toastBar {
          font-size: 20px;
          .text {
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
          }
          .text span:hover {
            color: #438dee;
            -webkit-animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            @-webkit-keyframes tracking-in-expand {
              0%,
              100% {
                transform: scale(1);
                opacity: 1;
              }
              50% {
                transform: scale(1.2);
                opacity: 0.4;
              }
            }
            @keyframes tracking-in-expand {
              0%,
              100% {
                transform: scale(1);
                opacity: 1;
              }
              50% {
                transform: scale(1.2);
                opacity: 0.4;
              }
            }
          }
          .title {
            color: rgba(255, 255, 255, 1);
          }
        }
        .share {
          font-size: 20px;
          cursor: pointer;
          display: flex;
          align-items: center;
          img {
            width: 23px;
            height: 23px;
            margin-right: 5px;
          }
        }
        .share:hover {
          -webkit-animation: tracking-in-expand 1.2s
            cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
          animation: tracking-in-expand 1.2s cubic-bezier(0.215, 0.61, 0.355, 1)
            infinite both;
          @-webkit-keyframes tracking-in-expand {
            0%,
            100% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.4;
            }
          }
          @keyframes tracking-in-expand {
            0%,
            100% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.4;
            }
          }
        }
      }
      .line {
        width: 100%;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.29);
        margin-bottom: 12px;
      }
      .mainBg {
        width: 100%;
        height: 469px;
        background-size: 100% 100%;
        margin-bottom: 41px;
      }
      .headline {
        font-size: 78px;
        font-weight: 800;
        margin-bottom: 50px;
        text-align: center;
      }
      .time {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 50px;
      }
      .detail {
        width: 100%;
        font-size: 18px;
        line-height: 40px;
        color: rgba(255, 255, 255, 1) !important;
        overflow-x: hidden;
        /deep/ table {
          // margin: 0 auto;
          width: 100%;
          /deep/ p {
            margin: 0;
          }
        }
        /deep/ p {
          margin: 0;
        }
        /deep/ img {
          max-width: 100% !important;
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .NewsDetail {
    .main {
      height: auto;
      .cover {
        display: none;
      }
      .content {
        padding: 0 40px;
        .toastLine {
          margin-top: 50px;
          .toastBar {
            font-size: 26px;
          }
        }
        .headline {
          font-size: 58px;
        }
        .time {
          font-size: 26px;
        }
        .detail {
          margin-bottom: 50px;
        }
      }
    }
  }
}
</style>